Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба",
часто используемый
в печати и вэб-дизайне.
Lorem Ipsum является
стандартной "рыбой"
для текстов на латинице
с начала XVI века.
В то время некий безымянный
печатник создал большую коллекцию
размеров и форм шрифтов,
используя Lorem Ipsum
для распечатки образцов.
Lorem Ipsum не только
успешно пережил без
заметных изменений пять
веков, но и перешагнул
в электронный дизайн.
Его популяризации
в новое время послужили
публикация листов Letraset
с образцами Lorem
Ipsum в 60-х годах и,
в более недавнее время,
программы электронной вёрстки
типа Aldus PageMaker,
в шаблонах которых
используется Lorem Ipsum.

Онлайн-справочник по самым часто задаваемым вопросам из темы "Как сделать?" на форуме QSP.su

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня
Заголовок шестого уровня

BODY

Переходим к блоку "<body>...</body>". Для этого блока в "skins/game.css" определены следующие настройки:

    html, body height: 100%; margin: 0px; padding: 0px; }

Данную строку лучше не менять, иначе при вёрстке у вас могут возникнуть проблемы с расположением остальных блоков. А вот строку:

    body margin:0;    padding:0; }

ниже по коду "skins/game.css" можно удалить, так как она частично дублирует предыдущую.

В блоке "<body>...</body>" находится множество блоков div, которые и отвечают за отрисовывание всего оформления игры. Далее вместо того, чтобы произносить целиком "div с id (айди) skin-splashscreen-foreground", мы будем говорить просто "блок skin-splashscreen-foreground", и тому подобное. Поскольку вся оставшаяся часть HTML-кода состоит из блоков div, и так будет понятно, что мы говорим о блоках div.

skin-splashscreen-foreground

Два основных блока в "body" это "skin-splashscreen-foreground" и "skin-ui-wrapper". И для обоих основные стили прописаны непосредственно в "gameAwesomium.html". Это сделано для того, чтобы данные блоки отображались адекватно стилям ещё при загрузке страницы, даже если "skins/game.css" ещё не загрузился.

Если запустить игру в Навигаторе, мы увидим "skin-splashscreen-foreground" на короткое время в виде простого белого экрана, затем он "погаснет", а вместо него отобразится блок "skin-ui-wrapper". Эти два основных блока рекомендую сохранить, они сменяют друг-друга (это происходит за счёт скриптов), создавая привлекательный переход, к тому же "skin-ui-wrapper" содержит все остальные блоки оформления.

Непосредственно внутри блока "skin-splashscreen-foreground" вы можете разместить логотип или приветственную надпись, которые появятся на короткое время, сменившись экраном игры. (Рекомендую оставлять основной фон сплэшскрина белым)

skin-ui-wrapper

skin-back1

Далее мы будем рассматривать содержимое блока "skin-ui-wrapper". И первый блок, который нам тут встречается, это блок "skin-back1". Он пустой и служит для того, чтобы задавать затенение по краям страницы (а строго говоря он задаёт фон страницы). Все его стили задаются в "skins/game.css", таким образом вы легко можете отредактировать стилистику этого блока, чтобы задать собственную рамку по краям окна, или создать какой либо эффект на фоне, ну или просто удалите этот блок, если подобные эффекты вам не нужны. Удаление блока "skin-back1" не повлияет на работоспособность игры.

skin-page

Следующий блок — это блок "skin-page". Собственно это вся страница целиком, где размещены блоки окон основного, дополнительного описаний, окна предметов, действий и строки ввода. Нет явных скриптов, которые работают с блоком "skin-page", однако удалять его не рекомендуется. Особенностью данного блока является то, что он перекрывает собой блок "skin-back1" (оно и понятно, ведь для отрисовки фона страницы используется именно "skin-back1"). Поэтому, если вы стилизуете "skin-page" каким-нибудь фоном, этот фон перекроет видимость блока "skin-back1".

skin-back2

В "skin-page" находится следующий блок, который мы рассмотрим, это блок "skin-back2". Это блок так называемого вторичного фона. Он снова растянут по всей ширине и высоте блока "skin-page", поэтому если поставить ему на фон сплошной цвет, это скроет видимость блока "skin-back1". Блок "skin-back2" нужен, чтобы отрисовать вертикальные полоски по краям окна в шаблоне "default". Если вы просто уберёте этот блок, функциональность игры не пострадает.

skin-top-menu-wrapper

Следующий за "skin-back2" блок — это блок "skin-top-menu-wrapper", который отвечает за включение верхнего меню. Верхнее меню — это полоска с кнопками управления игрой и включения/выключения звука. Эта полоска появляется в двух случаях:

Блок "skin-top-menu-wrapper" выводится со свойством "display:table;", а вложенные блоки соответсвенно со свойствами "display:table-row;" и "display:table-cell;". Это сделано для того, чтобы обеспечить соответствующее выравнивание элементов внутри блоков.

skin-top-menu-row, skin-user1, skin-user2

Вложенный блок "skin-top-menu-row" нужен исключительно для того, чтобы создать аналог табличной строки, хотя и его вы можете стилизовать.

Блоки "skin-user1" и "skin-user2" играют роль ячеек таблицы и в "skins/game.css" стилизованы по минимуму.

skin-user1-inner, skin-inv-toggle, skin-inv-caption

Блок "skin-user1-inner" служит контейнером для двух нижележащих блоков, обёрнутых в одну гиперссылку. Вспомогательный блок для размещения вложенных блоков в одну линию.

Нижележащие блоки, обёрнутые в ссылку — это блоки "skin-inv-toggle" и "skin-inv-caption", они располагаются в одну линию благодаря свойству "dysplay:inline-block;". При щелчке по любому из этих блоков выполняется JavaScript из гиперссылки:

skinToggleInv();

Данную функцию вы можете найти в файле "skins/js/game.js", она отвечает за плавное появление и пропадание окна с предметами, когда мы щёлкаем по слову инвентарь. Само собой размер страницы должен быть 480px и меньше.

skin-user-system, skin-user-music

В блоке "skin-user2" располагаются два блока "skin-user-system" и "skin-user-music", которые соответственно отвечают за отображение кнопок "управление игрой" ("меню плеера") и "управление музыкой". Блок "skin-user2" отображается даже когда страница больше 480 пикселей шириной. Если удалить этот блок, оставив только кнопки, кнопки сместятся в правый верхний угол и "провалятся" под слой, станут некликабельными, пока размер страницы превышает 480 пикселей.

skin-right-column

Блок "skin-right-column" занимает 30% от ширины страницы с правой стороны (при ширине страницы больше 480 пикселей). В этом блоке размещается окно предметов, а так же блок "skin-user2" (внизу), когда ширина страницы больше 480 пикселей.

skin-right-column-background

В блоке "skin-right-column", по аналогии со "skin-page", находится блок, создающий фон под блоком окна предметов, это блок "skin-right-column-background". Он отображается только при ширине страницы более 480 пикселей и включённом окне предметов.

qsp-wrapper-objs

Следующий блок "qsp-wrapper-objs" является уже непосредственно блоком окна предметов. Он отображается и при ширине окна 480 пикселей, и выше, только меняет своё местоположение. Этот блок связан с различными скриптами, которые создают полосу прокрутки в окне предметов.

qsp-scroller-objs, skin-inv-wrapper, skin-inv-top, qsp-inv

Блок "qsp-scroller-objs" вложен в предыдущий и технически нужен для создания полосы прокрутки в окне предметов. Этот блок связан со скриптами полосы прокрутки. Следующий блок — блок "skin-inv-wrapper" — отвечает как раз за отображение предметов при изменении расширения. Именно с этим блоком работает скрипт, когда страница меньше 481 пикселя шириной, и мы щёлкаем по кнопке "Инвентарь".

В "skin-inv-wrapper" вложены два блока. "skin-inv-top" — декоративный блок, разграничивающий кнопку инвентаря и окно предметов при ширине страницы меньше 481 пикселя. А вот "qsp-inv" — очень важный блок. Именно в этот блок, при его наличии, Quest Navigator отправляет список предметов. Если вы планируете использовать окно предметов, удалять этот блок нельзя, а лучше сохранить все блоки вложенные в "qsp-wrapper-objs".

skin-left-column

Блок "skin-right-column" занимает 70% от ширины страницы с левой стороны (при ширине страницы больше 480 пикселей). В этом блоке размещаются: окно дополнительного описания, окно основного описания и окно действий. А так же разные вспомогательные блоки.

skin-inv-bottom

Блок "skin-inv-bottom" — декоративный блок, нижняя горизонтальная полоска инвентаря, когда ширина страницы не превышает 480 пикселей. Эта полоска видна и когда инвентарь раскрыт, и когда он свёрнут.

skin-wrapper-main-outer, qsp-wrapper-main, qsp-scroller-main

Блок "skin-wrapper-main-outer" является внешним контейнером для блоков всех окон (дополнительного и основного описания и действий). В него вложены блоки "qsp-wrapper-main" и "qsp-scroller-main", на основе которых построен скрипт, иммитирующий ios-подобный скроллбар.

А уже здесь размещены блоки:

qsp-view

"qsp-view" — отвечает за отображение окна предпросмотра (оператор view). [С этим блоком работают скрипты в api.js, однако его удаление не меняет функциональности оператора view.]

qsp-vars

"qsp-vars" — отвечает за отображение окна дополнительного описания. В дефолтном шаблоне это окно отображается выше окна основного описания

qsp-main

"qsp-main" — отвечает за отображение окна основного описания. Этот блок нельзя удалять, однако вы можете вполне свободно стилизовать и настраивать его.

qsp-acts

"qsp-acts" — отвечает за отображение окна действий.

qsp-input-line

Блок "qsp-input-line", а так же вложенные в него блоки, нужны для отображения и стилизации строки ввода, реализованной через поле "<input>".

Диалоговые окна

Блоки диалоговых окон располагаются ниже блока "skin-page", чтобы при выведении на экран блоки диалоговых окон перекрывали блок "skin-page". Структура у всех диалоговых окон похожа, поэтому мы не будем подробно разбирать эти блоки.

qsp-dialog-msg

Блок "qsp-dialog-msg" служит для вывода на экран диалогового окна при выполнении оператора msg.

qsp-dialog-input

Блок "qsp-dialog-input" служит для вывода на экран диалогового окна с полем ввода при выполнении функции $input.

qsp-dialog-system-menu

Блок "qsp-dialog-system-menu" служит для вывода на экран диалогового окна меню управления игрой. Это пункты "Загрузить|Сохранить|Заново|Другие игры".

qsp-dialog-save-slots

Блок "qsp-dialog-save-slots" служит для вывода диалогового окна со слотами сохранения.

qsp-dialog-user-menu

Блок "qsp-dialog-user-menu" отвечает за вывод всплывающего меню при выполнении оператора menu.

qsp-dialog-view

Блок "qsp-dialog-view" отвечает за вывод блока с изображением (оператор view).

qsp-dialog-error

Блок "qsp-dialog-error" отвечает за вывод сообщений об ошибках в коде QSP.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

Aleks Versus'HowDo-F.A.Q.'2013-2021

Aleks Versus'Game Adventure Making'Really Unimaginable Stories'2013-2021